import { type ReactNode, useState } from 'react';
import type { Station as MapStation } from '@/components/MapView/Mapless/index.d';
import { DEFAULT_MAP_CENTER, DEFAULT_MAP_ZOOM } from '@/config/constants';
import type Mapless from '../../Mapless';
import { getOldStation, type MapMode } from '../../Mapless';
import styles from './index.module.less';
import XDMode from './parts/2D3D';
import DrawTool from './parts/DrawTool';
import LngLat from './parts/LngLat';
import MapHand from './parts/MapHand';
import MapOrigin from './parts/MapOrigin';
import PositionMkr from './parts/PositionMkr';
import PositionMus from './parts/PositionMus';
import SelectTool from './parts/SelectTool';
import ShowCategory from './parts/ShowCategory';
import ShowHide from './parts/ShowHide';
import ThemeMode from './parts/ThemeMode';

type PartProps = {
  show: boolean;
};

// TODO 采用parts组件的props类型简化此处代码
type MaplessControlPanelProps = {
  mapless: Mapless | undefined;
  setMapState?: (key: 'styleName' | 'zoom', value: unknown) => void;
  children?: ReactNode;
  positionMkr?: PartProps;
  lngLatTool?: PartProps;
  drawTool?: {
    show: boolean;
  };
  selectTool?: {
    show: boolean;
    disabled?: boolean;
    statioinFuncPrefix?: string;
    relativeManagerIds?: string[];
    onSelectionChange?: (selected: MapStation[] | undefined) => void;
    children?: ReactNode;
  };
  themeMode?: {
    show: boolean;
  };
  xdMode?: {
    show: boolean;
  };
  mapOrigin?: {
    show: boolean;
    onClick?: () => void;
  };
  showHide?: {
    show: boolean;
    manaId: string;
  };
  mapHand?: {
    show: boolean;
    onClick?: () => void;
  };
  showCategory?: {
    show: boolean;
  };
  positionMus?: {
    show: boolean;
  };
};

// TODO 使用context中的mapless将省略赋值

const MaplessControlPanel = (props: MaplessControlPanelProps) => {
  const {
    mapless,
    setMapState,
    children,
    positionMkr = { show: true },
    lngLatTool = { show: true },
    drawTool = { show: true },
    selectTool = { show: true },
    themeMode = { show: true },
    xdMode = { show: true },
    mapOrigin = { show: true },
    showHide = { show: false },
    mapHand = { show: true },
    showCategory = { show: false },
    positionMus = { show: true },
  } = props;

  const [curThemeMode, setCurThemeMode] = useState(''); // "dz_satellite" "dz_streets" ""
  function onThemeModeClick(mode: string): void {
    setCurThemeMode(mode);
    setMapState?.('styleName', mode);
  }

  const onXDModeClick = (mode: string) => {
    mapless?.toggleMode(mode as MapMode);
  };

  const [mapHandleCount, setMapHandleCount] = useState(0);
  const onMapHandClick = () => {
    // PositionMkr
    // DrawTool
    // SelectTool
    mapHand?.onClick?.();
    setMapHandleCount(mapHandleCount + 1);
  };

  const onMapOriginClick = () => {
    mapOrigin?.onClick
      ? mapOrigin?.onClick()
      : mapless?.flyTo({
          center: DEFAULT_MAP_CENTER,
          zoom: DEFAULT_MAP_ZOOM,
          speed: 1.5,
          curve: 1.5,
          essential: true,
        });
  };

  const [category, setCategory] = useState(''); // "sensor" "station" ""
  function onCategoryClick(cate: string): void {
    setCategory(cate);
    // TODO sm1对应PopInfo中，后续修改为不要写死
    // TODO 要使用useNewStation(但use之间互相兼容)
    const sm1 = getOldStation(mapless, 'nsm1');
    if (sm1) {
      if (cate === '') {
        sm1.displayCategoryFilterFunc = undefined;
      }
      if (cate === 'sensor') {
        sm1.displayCategoryFilterFunc = (s: MapStation) =>
          s.category === 'Sensor';
      }
      if (cate === 'station') {
        sm1.displayCategoryFilterFunc = (s: MapStation) =>
          s.category !== 'Sensor';
      }
      sm1.drawStations(sm1.getStations());
    }
  }

  return (
    <>
      <div className={styles.ctrls}>
        {positionMkr.show && (
          <PositionMkr reset={mapHandleCount} mapless={mapless} />
        )}
        {lngLatTool.show && <LngLat mapless={mapless} />}
        {drawTool.show && <DrawTool reset={mapHandleCount} mapless={mapless} />}
        {selectTool.show && (
          <SelectTool
            reset={mapHandleCount}
            mapless={mapless}
            disabled={selectTool?.disabled}
            statioinFuncPrefix={selectTool?.statioinFuncPrefix}
            relativeManagerIds={selectTool?.relativeManagerIds}
            onSelectionChange={selectTool?.onSelectionChange}
          >
            {selectTool?.children}
          </SelectTool>
        )}
        {themeMode.show && (
          <ThemeMode
            themeMode={curThemeMode}
            onThemeModeClick={onThemeModeClick}
          />
        )}
        {xdMode.show && <XDMode onModeClick={onXDModeClick} />}
        {mapOrigin.show && <MapOrigin onClick={onMapOriginClick} />}
        {showHide?.show && (
          <ShowHide manaId={showHide.manaId} mapless={mapless} />
        )}
        {mapHand.show && <MapHand onClick={onMapHandClick} />}
        {showCategory.show && (
          <ShowCategory category={category} onCategoryClick={onCategoryClick} />
        )}
        {children}
      </div>
      {positionMus.show && <PositionMus mapless={mapless} />}
    </>
  );
};

export default MaplessControlPanel;
